<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<style type="text/css">
			body,
			ul {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			.content {
				width: 1200px;
				height: 370px;
				margin: 80px auto;
			}
			
			.conTop {
				position: relative;
				height: 340px;
			}
			
			.conTop ul {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
				font-size: 100px;
				line-height: 370px;
				text-align: center;
			}
			
			.conTop ul li {
				position: absolute;
				width: 730px;
				height: 100%;
				transition: 0.3s;
				background-color: yellow;
			}
			
			.conTop ul .list1 {
				transform: scale(0.8);
				transform-origin: 0 100%;
				z-index: 1;
			}
			
			.conTop ul .list2 {
				transform: translateX(235px);
				z-index: 2;
			}
			
			.conTop ul .list3 {
				transform: translateX(730px) scale(0.8);
				transform-origin: 100% 100%;
				z-index: 1;
			}
			
			.conTop ul .list4 {
				transform: translateX(965px) scale(0.8);
				transform-origin: 100% 100%;
				z-index: 0;
			}
			
			.conTop ul .list5 {
				transform: translateX(1200px) scale(0.8);
				transform-origin: 100% 100%;
				z-index: 0;
			}
			
			.conTop ul .list6 {
				transform: translateX(1435px) scale(0.8);
				transform-origin: 100% 100%;
				z-index: 0;
			}
			
			.btn {
				position: absolute;
				top: 50%;
				width: 50px;
				height: 50px;
				font-size: 20px;
				line-height: 50px;
				text-align: center;
				color: white;
				cursor: pointer;/*鼠标移到字上面显示小手图标*/
				background-color: rgba(0, 0, 0, 0.4);
				z-index: 3;
			}
			
			.btn:hover {
				background-color: rgba(0, 0, 0, 0.5);
			}
			
			.btnLeft {
				left: 0;
			}
			
			.btnRight {
				right: 0;
			}
			
			.conBottom {
				height: 30px;
				text-align: center;
			}
			
			.conBottom span {
				display: inline-block;
				width: 30px;
				height: 3px;
				background-color: #ccc;
			}
		</style>
	</head>

	<body>
		<div class="content">
			<div class="conTop">
				<ul>
					<li class="list1" style="background-color: #0f0;">6</li>
					<li class="list2" style="background-color: #ff0;">1</li>
					<li class="list3" style="background-color: #00f;">2</li>
					<li class="list4" style="background-color: #f0f;">3</li>
					<li class="list5" style="background-color: #0ff;">4</li>
					<li class="list6" style="background-color: #f00;">5</li>
				</ul>
				<div class="btnLeft btn"><</div>
				<div class="btnRight btn">></div>
			</div>
			<div class="conBottom">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<script type="text/javascript">
			var content = document.getElementsByClassName("content")[0];
			var btnLeft = document.getElementsByClassName("btnLeft")[0];
			var btnRight = document.getElementsByClassName("btnRight")[0];
			var span = document.getElementsByTagName("span");
			var li = document.getElementsByTagName("li");
			var timer;
			var index = 0;
			var arr = ["list1", "list2", "list3", "list4", "list5", "list6"];
			function blue() {
				for(var i = 0; i < span.length; i ++){
					span[i].style.backgroundColor = "#ccc";
				}
				span[index].style.backgroundColor = "blue";
			}
			function move(){
				for(var i = 0; i < li.length; i++) {
					li[i].setAttribute("class", arr[i]);
				}
			}
			function riMove() {
				arr.unshift(arr[5]);
				arr.pop();
				move();
				index ++;
				if(index > 5){
					index = 0;
				}
				blue();
			}
			function leMove() {
				arr.push(arr[0]);
				arr.shift();
				move();
				index --;
				if(index < 0){
					index = 5;
				}
				blue();
			}
			function play(){
				timer = setInterval(function(){
					riMove();
				},2000);
				blue();
			}
			//清除定时器
//			content.onmouseover = function(){
//				clearInterval(timer)
//			}
//			content.onmouseout = function(){
//				play()
//			}
			btnRight.onclick = function(){
				clearInterval(timer)
				riMove()
				play()
			}
			btnLeft.onclick = function(){
				clearInterval(timer)
				leMove()
				play()
			}
			play();
		</script>
	</body>

</html>